<template>
  <div>用户</div>
</template>

<script>
import {
  getUserListApi,
  getPermissionsApi,
  addUsersApi,
  delUsersApi,
  getUsersInfoApi,
  editUsersApi,
} from "@/api/user";
export default {
  data() {
    return {
      list: [],
      dialogVisible: false,
      queryData: {
        username: "",
        page: 1,
        pagesize: 10,
      },
      // 权限组要上传的数据
      permissionsData: {
        title: "",
        page: 1,
        pagesize: 10,
      },
      permissionsList: [],
      counts: "",
      // 添加的数据
      formData: {
        username: "", //用户名
        password: "", //密码
        phone: "", //联系电话
        role: "", //角色名称
        permission_group_id: "", //权限组id
        avatar: "", //头像
        email: "", //邮件
        introduction: "",
      },
      formRules: {
        username: [
          { required: true, message: "请输入", trigger: "blur" },
          { min: 2, max: 6, message: "长度在2-6", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            pattern: /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
            message: "邮箱格式不正确",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[a-z0-9_-]{6,18}$/,
            message: "密码格式不正确，字母开头",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.initData();
    this.permissions();
  },
  methods: {
    // 每页显示数量
    handleSizeChange(val) {
      this.queryData.pagesize = val;
      this.initData();
    },
    // 第几页
    handleCurrentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 获取列表数据
    async initData() {
      let { list, counts } = await getUserListApi(this.queryData);
      // console.log(res);
      this.list = list;
      this.counts = counts;
    },
    // 搜索重置
    resetSearch() {
      this.queryData.username = "";
      this.initData();
    },
    async permissions() {
      let { list } = await getPermissionsApi(this.permissionsData);
      // console.log(res);
      this.permissionsList = list;
    },
    // 添加
    async btnOk() {
      // try {
      //   await this.$refs.form.validate();
      // } catch (error) {
      //   console.log(error);
      // }
      if (this.formData.id) {
        await editUsersApi(this.formData);
        this.$message.success("修改成功");
      } else {
        await addUsersApi(this.formData);
        this.$message.success("添加成功");
      }

      this.formData = {};
      this.dialogVisible = false;
      this.initData();
    },
    // 修改
    async editHandler(id) {
      let res = await getUsersInfoApi(id);
      console.log(res);
      this.formData = res;
      this.dialogVisible = true;
    },
    // 删除
    async delHandler(id) {
      await this.$confirm("确认删除吗");
      await delUsersApi(id);
      this.$message.success("删除成功");
      this.initData();
    },
  },
};
</script>

<style>
.box {
  margin-right: 10px;
}
</style>
